<template>
    <div class="clearfix">
        <section class="content-header">

            <div class="title">首页
                <span style="padding:0 5px">></span>车辆管理
                <span class="addcar">
                    <router-link to="carsadd" style="color:#3c8dbc">
                        <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;添加车辆</router-link>
                </span>
            </div>

        </section>
        <div class="main clearfix">
            <div class="col-md-2">
                <div class="form-group">
                    <label class="col-sm-4 control-label">车牌号码：</label>
                    <div class="col-sm-8">
                        <input type="text" name="" id="" placeholder="请输入车牌号码" v-model="selectData.carNo">
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <carType v-model="selectData.carType" :msg="selectData.carType" />
            </div>
            <div class="col-md-2">
                <deptlist v-model="selectData.deptid" :msg="selectData.deptid" />
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="col-sm-5 control-label">车辆管理员：</label>
                    <div class="col-sm-7">
                        <input type="text" name="" id="" placeholder="请输入车辆管理员姓名" v-model="selectData.driver">
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-md-offset-1">
                <div class="form-group">
                    <button type="button" class="btn btn-primary" @click="$refs.page.getList(1)">搜索</button>
                </div>
            </div>
            <div class="col-md-2">
                <!-- <div class="form-group">
                    <div class="col-sm-8 col-sm-offset-4">
                        <select class="form-control select2" style="width: 100%">
                            <option>默认排序</option>
                            <option>1</option>
                        </select>
                    </div>
                </div> -->
            </div>
        </div>
        <div style="margin:0 10px">
            <el-table :data="carlistData" style="width: 100%" border row-key="id" :expand-row-keys="expands" @row-click="rowClick">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-row style="border-bottom:2px solid #bbbbbb">
                                <el-col :span="2">
                                    <img :src="props.row.photopath" alt="">
                                </el-col>
                                <el-col :span="21" :offset="1">
                                    <el-row>
                                        <el-form-item label="">
                                            <span class="blue">{{ props.row.carNo }}</span>
                                        </el-form-item>
                                    </el-row>
                                    <el-row>
                                        <el-form-item label="车辆类型：">
                                            <span>{{ props.row.carTypeName }}</span>
                                        </el-form-item>
                                        <el-form-item label="车辆品牌：">
                                            <span>{{ props.row.carBrand }}</span>
                                        </el-form-item>
                                        <el-form-item label="发动机号：">
                                            <span>{{ props.row.engineNumber }}</span>
                                        </el-form-item>
                                    </el-row>
                                    <el-row>
                                        <el-form-item label="车辆颜色：">
                                            <span>{{ props.row.carColor }}</span>
                                        </el-form-item>
                                        <el-form-item label="使用部门：">
                                            <span>{{ props.row.dept }}</span>
                                        </el-form-item>
                                        <el-form-item label="车架号：">
                                            <span>{{ props.row.carFrame }}</span>
                                        </el-form-item>
                                        <el-form-item label="当前总里程：">
                                            <span>{{ props.row.mileage }}</span>
                                        </el-form-item>
                                    </el-row>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="21" :offset="3">
                                    <el-row>
                                        <el-form-item label="">
                                            <span class="blue">{{ props.row.driver }}</span>
                                        </el-form-item>
                                    </el-row>
                                    <el-row>
                                        <el-form-item label="联系电话：">
                                            <span>{{ props.row.dervermobile }}</span>
                                        </el-form-item>
                                        <el-form-item label="驾驶证号：">
                                            <span>{{ props.row.driverNumber }}</span>
                                        </el-form-item>
                                        <el-form-item label="驾驶证类型：">
                                            <span>{{ props.row.driverType }}</span>
                                        </el-form-item>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="车牌号码" prop="carNo" align="center">
                </el-table-column>
                <el-table-column label="车辆类型" prop="carTypeName" align="center">
                </el-table-column>
                <el-table-column label="车辆管理员" prop="driver" align="center">
                </el-table-column>
                <el-table-column label="联系电话" prop="dervermobile" align="center">
                </el-table-column>
                <el-table-column label="状态" prop="carStatus" align="center">
                </el-table-column>
                <el-table-column label="备注" prop="carRemark" align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100" align="center"  @click="stopMsg($event)">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="revise(scope.row.id)">修改</el-button>
                        <el-button type="text" size="small" @click="deletecar(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="border-top:1px solid #bbb;width:100%">
            </div>
        </div>
        <div class="col-md-offset-8 col-md-4" style="margin-top:50px;">
            <ctrlPage :setPage="getCarlist" :type="type" ref="page" />
        </div>
    </div>
</template>

<script>
import deptlist from "@/components/common/deptlist.vue";
import carType from "@/components/common/carType.vue";

import ctrlPage from "@/components/common/ctrlPage.vue";

export default {
    data() {
        return {
            type: "total, sizes, prev, pager, next, jumper",
            deptlistData: [],
            carlistData: [],
            expands: [],
            total: "",
            selectData: {
                pageSize: "10",
                carNo: "",
                carType: "",
                deptid: "",
                driver: ""
            }
        };
    },
    components: {
        deptlist,
        ctrlPage,
        carType
    },
    mounted() {
        this.$refs.page.getList(1);
        this.getDeptlist();
    },
    methods: {
        stopMsg(e){
            e.cancelBubble();
        },
        getDeptlist() {
            this.$api.cars.home.deptlist().then(res => {
                if (res.success) {
                    this.deptlistData = res.data[0].childsList;
                    // console.log(this.deptlistData);
                }
            });
        },
        getCarlist(pageIndex, pageSizes, callback) {
            // console.log(pageIndex)
            this.$api.cars.home
                .carlist({
                    pageNum: pageIndex || 1,
                    pageSize: pageSizes || 10,
                    carNo: this.selectData.carNo,
                    carType: this.selectData.carType,
                    deptid: this.selectData.deptid,
                    driver: this.selectData.driver
                })
                .then(res => {
                    if (res.success) {
                        console.log(res);
                        this.carlistData = res.data.list;
                        this.total = res.data.total;
                        callback(this.carlistData, this.total);
                    }
                });
        },
        revise(id) {
            // console.log(id)
            this.$router.push({ path: "updatecar", query: { id: id } });
        },
        deletecar(id) {
            this.$api.cars.home.deletecar({
                id: id
            }).then(res => {
                if (res.success) {
                    console.log(1);
                    this.$refs.page.getList(1);
                }
            });
        },
        rowClick(row, event, column) {
            Array.prototype.remove = function (val) {
                let index = this.indexOf(val);
                if (index > -1) {
                    this.splice(index, 1);
                }
            };

            if (this.expands.indexOf(row.id) < 0) {
                this.expands.push(row.id);
            } else {
                this.expands.remove(row.id);
            }
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-header {
  .title {
    font-weight: bolder;
  }
  .addcar {
    position: relative;
    float: right;
  }
}
.main {
  padding: 10px 20px;
  border: 1px solid #bbb;
  margin: 10px;
  border-radius: 10px;
  height: 60px;
  background: #fff !important;
  input,
  select,
  textarea {
    border-radius: 5px;
  }
  .control-label {
    margin: 0;
    padding: 0;
    line-height: 34px;
    height: 34px;
    text-align: right;
  }
  .form-control {
    line-height: 34px;
    height: 34px;
    padding: 0 12px;
  }
  input {
    line-height: 34px;
    height: 34px;
    padding-left: 12px;
    border: 1px solid #bbb !important;
  }
}
.demo-table-expand {
  font-size: 0;
  label {
    width: 90px;
    color: #99a9bf;
  }
  .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 25%;
  }
  img {
    width: 110px;
    height: 110px;
  }
  .el-row {
    text-align: left;
  }
  .blue {
    color: #3c8dbc;
    font-weight: 700;
  }
}
</style>
